<template>
  <div id="collectionList" class="mainContent" @scroll="onScroll">
    <ul v-if="PatientList.length">
      <li @click="trunToB($event)"
          :key="index"
          v-for="(item, index) in PatientList"
          :data-id="item.ID">

        <div class="personal-details">
          <div class="collection" :data-id="item.ID" :data-tags="item.IsTag" @click="collection($event)" ><i :class="{'sign': item.IsTag <= 0,'util': item.IsTag > 0}"></i></div>
          <div class="personal-content">
            <div class="sex">
              <img src="./../../../../static/images/man.png" alt="男" v-show="item.Gender_Text=='男'">
              <img src="./../../../../static/images/woman.png" alt="女" v-show="item.Gender_Text=='女'">
              <!-- <img :src="statusimage" > -->
              <div class="nursing" @click="routeLink($event)" :data-id="item.ID" v-show="item.NURSINGSHEET!=''" title="特护单"><img src="./../../../../static/images/nursing.png" alt="Alternate Text" /></div>
              <div>
                <p class="bedId">{{item.BedName}}</p>
                <p class="Id">{{item.ID}}</p>
              </div>
            </div>

            <div class="message">
              <span class="userName">{{item.Name}}</span>
              <i class="line"></i>
              <span class="age">{{item.Age}}</span>岁
            </div>
            <div class="illness">
              <span>病情：</span>
              <span class="disease">{{item.Sickness_Text}}</span>
            </div>
            <!-- <div class="score">
            <span>评分：</span>
            <span class="num">{{item.Apache_Score}}</span>
          </div>-->
            <div class="ill-time">{{item.InIcuTime | formatDate}}</div>
            <div class="sign-icon">
              <span class="ill-te">{{item.NursingLevel_Text.substring(0,1)}}</span>
              <span class="ill-shu" v-show="item.OperationState >= 1">术</span>
              <span class="ill-fei" v-show="item.OperationState < 0">费</span>
              <span class="score">{{item.Apache_Score | filterScore}}</span>
            </div>
          </div>
        </div>

      </li>
    </ul>
    <confirm ref="alert" :message="'确认取消收藏吗？'" :sureBtn="CancelCollection"> </confirm>
    <loading v-if="showScroll"></loading>
    <loading v-if="PatientList.length==0 && isShow"></loading>
    <noSearch v-if="PatientList.length==0  && !isShow"></noSearch>
  </div>
</template>
<script>
  import { formatDate } from "@/components/common/date"; //引入时间转换JS
  import { apiPatientList, apiNursingSheetOne, apiAddPatientTags, apiDeletePatientTags } from "@/api/api"; // 导入我们的患者列表api接口
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
  import loading from '@/components/loading/loading' //导入loading 组件
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import confirm from '@/components/confirm/confirm'
  import axios from 'axios';
  export default {
    name: "PatientList",
    data() {
      return {
        PatientList: [],
        TotalCount: 10,
        icuName: JSON.parse(sessionStorage.getItem('user')).Content, //登录用户的科室
        patientName: "", //患者名字
        isShow: true,
        patientId: '',
        src: '',
        isTwo: false,             //标识当前是否查询病情（是否第二次请求）
        sickness: '',
        PatientID: '',          //当前点击患者ID
        currentPage: 1,    //当前页码
        pageSize: 20, //每页显示20条数据
        //懒加载
        isScroll: true,
        showScroll: false,
        count: 0, //总页数
      };
    },
    watch: {
      patientName: {  //监听搜索条件有没改变，如果改变就执行下面的方法
        handler(curVal, oldVal) {
          if (this.patientName == '') {
            this.currentPage = 1;
            this.PatientList = [];
            this.isShow = true;
            if (!this.isTwo) {
              this.getPatientList();
            }
          } else {
            this.currentPage = 1;
            this.PatientList = [];
            this.getPatientList();
          }

        }

      },
    },
    mounted() {

      // alert(localStorage.getItem("userMsg"))
      //this.test();
      this.$nextTick(() => {
        this.getPatientList();
      })
      Bus.$on("searchVal", e => {
        if (e.trim() == '') {
          this.PatientList = [];
          this.isShow = true;
          this.patientName = '';
          this.sickness = '';
          this.currentPage = 1;
          this.getPatientList2();
        } else {
          this.patientName = e.trim();
        }
        // 　　　　　console.log(`传来的数据是：${e}`)
      });
    },
    methods: {
      // 获取数据
      getPatientList() {
        this.sickness = '';
        // // 调用患者列表api接口，并且提供了参数
        apiPatientList({
          pageIndex: this.currentPage,
          pageSize: this.pageSize,
          userId: JSON.parse(sessionStorage.getItem('user')).ID,
          isInICU: false,                          //是否在科
          isTags: true,                                   //收藏
          icuName: this.icuName,                        // 科室
          patientName: this.patientName,              //床位加患者人名参数
          sickness: this.sickness                   //病情参数
        })
          .then(res => {
            if (res.Status == 1) {
              this.isShow = true;
              if (this.currentPage == 1) {
                this.PatientList = []
              }
               //console.log( res.Data)
              this.PatientList.push.apply(this.PatientList, res.Data);
              this.isScroll = true;
              this.showScroll = false;
              this.count = Math.ceil(res.TotalCount / this.pageSize); //计算总页数
              // 把获取到的总数传入公共媒介 js
              Bus.$emit("TotalCount", res.TotalCount);
              //  alert(res)
              //console.log( res.Data)
            } else if (res.Status == -1) {
              this.isTwo = true;
              this.sickness = this.patientName;
              this.patientName = '';
              apiPatientList({
                pageIndex: this.currentPage,
                pageSize: this.pageSize,
                userId: JSON.parse(sessionStorage.getItem('user')).ID,
                isInICU: false,                          //是否在科
                isTags: true,                                   //收藏
                icuName: this.icuName,                        // 科室
                patientName: this.patientName,              //床位加患者人名参数
                sickness: this.sickness                   //病情参数
              })
                .then(res => {
                  if (res.Status == 1) {
                    this.isShow = true;
                    if (this.currentPage == 1) {
                      this.PatientList = []
                    }
                    //console.log( res.Data)
                    this.PatientList.push.apply(this.PatientList, res.Data);
                    this.isScroll = true;
                    this.showScroll = false;
                    this.count = Math.ceil(res.TotalCount / this.pageSize); //计算总页数
                    // 把获取到的总数传入公共媒介 js
                    Bus.$emit("TotalCount", res.TotalCount);
                    //  alert(res)
                    //console.log( res.Data)
                  } else if (res.Status == -1) {
                    this.isShow = false;
                    this.isScroll = false;
                    this.PatientList = [];
                  }
                })
            }
          })
          .catch(err => {
            console.log(err)
          })

      },
      getPatientList2() {
        apiPatientList({
          pageIndex: this.currentPage,
          pageSize: this.pageSize,
          userId: JSON.parse(sessionStorage.getItem('user')).ID,
          isInICU: false,                          //是否在科
          isTags: true,                                   //收藏
          icuName: this.icuName,                        // 科室
          patientName: this.patientName,              //床位加患者人名参数
          sickness: this.sickness                   //病情参数
        })
          .then(res => {
            if (res.Status == 1) {
              this.isShow = true;
              if (this.currentPage == 1) {
                this.PatientList = []
              }
              //console.log( res.Data)
              this.PatientList.push.apply(this.PatientList, res.Data);
              this.isScroll = true;
              this.showScroll = false;
              this.count = Math.ceil(res.TotalCount / this.pageSize); //计算总页数
              // 把获取到的总数传入公共媒介 js
              Bus.$emit("TotalCount", res.TotalCount);
              //  alert(res)
              //console.log( res.Data)
            } else {
              this.isShow = false;
              this.isScroll = false;
              this.PatientList = [];
            }
          })

      },
      getNursingSheetOne() {
        apiNursingSheetOne({
          patientIdIn: this.patientId
        })
          .then(res => {
            if (res.Status == 1) {
              this.src = axios.defaults.baseURL.replace("api", "") + JSON.parse(res.Data)[0].MemoryAddress.replace("AppServerWeb", "");
              this.$router.push({
                path: '/nursingPdf',
                query: { http: this.src, state: 1, patientId: this.patientId }
              })
            } else if (res.Status == -1) {
              this.$toast.center('该患者没有特护单');
            }
          })

      },
      onScroll() {
        let viewH = $('#collectionList').height();//可见高度
        let contentH = $('#collectionList ul').height();//内容高度
        let scrollTop = $('#collectionList').scrollTop();//滚动高度
        if (scrollTop / (contentH - viewH) == 1 && this.isScroll) { //到达底部100px时,加载新内容
          if (this.currentPage >= this.count || !this.isScroll) {
            if (contentH - viewH - scrollTop <= 25) {
              this.$toast.center('已加载所有列表！');
            }
            return
          }
          this.currentPage++;
          this.showScroll = true;
          this.isScroll = false;
          this.getPatientList();
        }
      },
      trunToB(e) {
        //console.log(e.target)
        this.$store.commit("id", e.currentTarget.getAttribute("data-id"));
        this.$store.commit("slideinfo");
        this.$router.push({ path: "/basicInformation", query: { item: 1 } });
      },
      routeLink(e) {
        e.stopPropagation(); //阻止事件冒泡
        this.patientId = e.currentTarget.getAttribute("data-id");
        this.getNursingSheetOne();

      },
      collection(e) {
        e.stopPropagation(); //阻止事件冒泡
        this.PatientID = e.currentTarget.getAttribute("data-id");
          //console.log('删除');
          this.$refs.alert.show();
      },
      CancelCollection() {    //点击取消收藏弹出框确定按钮事件
        apiDeletePatientTags({
          UserID: JSON.parse(sessionStorage.getItem('user')).ID,
          PatientID: this.PatientID
        })
          .then(res => {
            if (res.ResultCode == 1) {
              //console.log(res)
              this.currentPage = 1;
              this.getPatientList2();
              this.$toast.center('取消收藏成功');
            } else {
              this.$toast.center(res.Message);
            }
          })
      }
    },


    filters: {
      formatDate(time) {
        var date = new Date(parseInt(time.substring(6, 19)));
        return formatDate(date, "yyyy-MM-dd hh:mm");
      },
      filterScore(num) {
        if (!num) return "";
        return num + "分";
      }
    },
    components: {
      loading,
      noSearch,
      confirm
    }
  };
</script>
<style scoped>
  #collectionList {
    padding-bottom: 20px;
    overflow-y: auto;
    width: 100%;
    padding: 10px 45px 20px 45px;
  }

    #collectionList > ul {
      display: flex;
      flex-flow: wrap;
    }

      #collectionList > ul > li {
        margin-top: 30px;
        margin-left: 30px;
      }

  .personal-details {
    position: relative;
    width: 200px;
    height: 235px;
    display: flex;
    align-items: center;
    box-shadow: 1px -2px 15px #ccc;
    font-size: 16px;
    border-radius: 8px;
    padding: 10px 0;
  }

  .personal-content {
    width: 100%;
  }

  .line {
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #ccc;
    vertical-align: middle;
  }

  .ill-time {
    font-size: 14px;
    color: #666;
  }

  .personal-details .sex > img {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 20px;
  }

  .personal-details .bedId {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin-top: 5px;
    color: #000;
  }

  .personal-details .Id {
    width: 100%;
    text-align: center;
    font-size: 16px;
    margin-top: 5px;
    color: #666;
  }

  .nursing {
    position: absolute;
    height: 60px;
    width: 55px;
    text-align: right;
    top: 6px;
    top: 6px;
    left: 18px;
    cursor: pointer;
  }

  .collection {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 5px;
    top: 5px;
    z-index: 9999;
    cursor:pointer;
  }

    .collection i, .collection i.sign {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url('../../../../static/images/sign02.png');
      background-repeat: no-repeat;
      background-size: cover;
    }

      .collection i.util {
        background-image: url('../../../../static/images/util_10.png');
      }

  .sex {
    display: flex;
    align-items: center;
    padding: 10px 0 15px 20px;
    position: relative;
    text-align: left;
  }

  .message,
  .illness,
  .ill-time,
  .sign-icon {
    padding-left: 20px;
    padding-right: 15px;
    margin-top: 10px;
  }

  .score {
    color: #11a7f3;
    font-size: 16px;
  }

  .message .userName {
    margin-right: 15px;
  }

  .message .age {
    margin-left: 15px;
  }

  .sign-icon .ill-te {
    color: #de5f59;
  }

  .sign-icon .ill-shu {
    color: #11a7f3;
  }

  .sign-icon .ill-fei {
    color: #f5965d;
  }

  .sign-icon span {
    margin-left: 6px;
  }

    .sign-icon span:after {
      display: inline-block;
      content: "";
      width: 1px;
      height: 21px;
      background-color: #ccc;
      vertical-align: top;
      margin-left: 10px;
    }

    .sign-icon span.score:after {
      width: 0;
    }

    .sign-icon span:first-child {
      margin-left: 0;
    }
    @media (max-width: 768px) {
}
@media (max-width: 425px) {
  #collectionList {
    padding: 0;
  }
  #collectionList > ul > li {
  margin-top: 0;
  margin-left: 0;
  margin:15px auto;
}
.personal-details {
  width: 240px;
  
}
}
</style>
